<template>
	<view class="home">
		<!-- 搜索 -->
		<!-- 轮播图 -->
		<swiper class="swiper-container" :current="tabIndex" indicator-active-color="rgba(7, 193, 96, 0.7)" :indicator-dots="true">
			<swiper-item class="swiper-item-box" v-for="(val, index) in tabList" :key="index">
				<view class="swiper-item-banner">
					<view class="swiper-item">
						<template v-if="val.type == '0'">
							<image @click="link('banner', val)" class="img" :src="val.src" mode="widthFix"></image>
						</template>
						<template v-if="val.type == '1'">
							<video class="video" :src="val.src" controls></video>
						</template>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<!-- 畅销产品 -->
		<view class="listcard-box">
			<view class="listcard-title">--畅销产品--</view>
			<view class="listcard" v-for="(product, i) in products" :key="i" @click="link('product', product)">
				<view class="listcard-image"><image :src="product.src" mode="aspectFill"></image></view>
				<view class="listcard-content">
					<view class="listcard-content_title">{{ product.title }}</view>
					<view class="listcard-content_sum">{{ product.subTitle }}</view>
					<view class="listcard-content_des">
						<view class="listcard-content_des-money">{{ product.tag }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import myServer from '@/plugins/http/server/my';
export default {
	data() {
		return {
			scrollTop: 0,
			tabList: [
				// {
				// 	img: '/static/home/banner1.jpg',
				// },
				// {
				// 	img: '/static/home/banner2.jpg',
				// },
				// {
				// 	img: '/static/home/banner3.jpg',
				// }
			],
			products: []
		};
	},
	onShow() {
		this.getData();
	},
	onReachBottom() {
		console.log('触底了，这里做分页加载逻辑处理');
	},
	onPullDownRefresh() {
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1500);
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop > this.scrollTop ? e.scrollTop : this.scrollTop;
	},
	methods: {
		// 轮播图挑战
		link(type, item) {
			if (type === 'banner') {
				if (item.link == 1) {
					uni.navigateTo({
						url: `/pages/article/index?id=${item.linkId}`
					});
				}
			} else {
				uni.navigateTo({
					url: `/pages/article/index?id=${item.id}`
				});
			}
		},
		getData() {
			myServer
				.miniBannerAll({ pageNo: 1, pageSize: 999 })
				.then(({ data }) => {
					this.tabList = data.datas;
					myServer
						.miniProductAll({ pageNo: 1, pageSize: 10 })
						.then(({ data }) => {
							this.products = data.datas;
						})
						.catch(e => {
							console.log(e);
						});
				})
				.catch(e => {
					console.log(e);
				});
		}
	}
};
</script>

<style lang="less" scoped>
@import 'index';
</style>
